<template>
  <div class="ma-content-block p-4">
    <ma-crud :options="crud" :columns="columns" ref="crudRef">

      <template #info="{ record }">
        <div class="flex flex-col items-center">
          <text>{{ record.nickname || '微信用户' }}</text>
        </div>
      </template>

      <template #useful_amt="{ record }">
        <a-link @click="editBalance(record)"><icon-edit /> {{ record.useful_amt }}</a-link>
      </template>

      <template #level="{ record }">
        <a-link @click="editLevel(record)"><icon-edit /> {{ record.level }}</a-link>
      </template>

      <template #operationAfterExtend="{ record }">
        <a-link @click="openMemberChannel(record)"><icon-edit /> 渠道码</a-link>
      </template>
    </ma-crud>

    <memberChannel ref="memberChannelRef" />
    <memberLevel ref="memberLevelRef" @success="levelChangeSuccess"/>
    <memberAmt ref="memberAmtRef" @success="amtChangeSuccess"/>

  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from 'vue'

import api from '@/api/prm/member.js'
import { Message } from '@arco-design/web-vue'
import memberChannel from './components/memberChannel.vue'
import memberLevel from './components/memberLevel.vue'
import memberAmt from './components/memberAmt.vue'


const crudRef = ref()
const memberChannelRef = ref()
const memberLevelRef = ref()
const memberAmtRef = ref()

const openMemberChannel = (record) => {
  memberChannelRef.value.open(record)
}

// 等级变更后的回调
const levelChangeSuccess = () => {
  crudRef.value.refresh()
}
const amtChangeSuccess = () => {
  crudRef.value.refresh()
}

const editLevel = (record) => {
  memberLevelRef.value.open(record)
}
const editBalance = (record) => {
  memberAmtRef.value.open(record)
}

//表格
const crud = reactive({
  api: api.list,
  showIndex: false,
  // pageLayout: 'fixed',
  showTools:false,
  // tablePagination:true,
  rowSelection: {showCheckedAll: true},
  operationColumn: true,
  operationColumnWidth: 100,
  searchColNumber:3,
  add: {show: false, api: api.add, auth: ['prm:member:save']},
  edit: {show: false, api: api.update, auth: ['prm:member:update']},
  delete: {show: false, api: api.delete, auth: ['prm:member:delete'],},
  formOption: {viewType: 'drawer', width: 800},
})

const columns = reactive([
  {title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: true},
  {title: '昵称', dataIndex: 'info', formType: 'input', search: true, width: 80,},
  {title: '手机号', dataIndex: 'phone', formType: 'input', search: true, width: 100,},
  {title: '邀请码', dataIndex: 'invite_code', formType: 'input', search: true, width: 80,},
  {title: '会员等级', dataIndex: 'level', formType: 'input', search: true, width: 80,},
  {title: '总余额', dataIndex: 'total_amt', formType: 'input', search: true, width: 80,},
  {title: '可用余额', dataIndex: 'useful_amt', formType: 'input', search: true, width: 80,},
  {title: '团队总收益', dataIndex: 'team_total_amt', formType: 'input', search: true, width: 80,},
  {title: '直邀会员数', dataIndex: 'invite_count', formType: 'input', search: true, width: 80,},
  {title: '间邀会员数', dataIndex: 'invite_c_count', formType: 'input', search: true, width: 80,},
  {title: '返券总单量', dataIndex: 'tbk_count', formType: 'input', search: true, width: 80,range:true},
  {title: 'CPA单量', dataIndex: 'task_count', formType: 'input', search: true, width: 80,rangeSearch: true,},
  {
    title: '注册时间', dataIndex: 'created_at', addDisplay: false, editDisplay: false,
    search: true, formType: 'range', width: 180
  }])

</script>

<script>
export default {name: 'prm:member'}
</script>

<style scoped>

</style>
